<template>
  <div>
    <div class="drawer_wrap">
      <el-drawer
        :visible.sync="drawer"
        :append-to-body="true"
        :direction="direction"
        size="100%"
        >

          <div class="map_wrap">
            <div class="map_left">
                  <h1>打卡范围设置</h1>
                  <div id="mymap"  class="map_left_map_info">

                  </div>
            </div>
             <div class="map_right">
               <ul class="company_list">
                   <li :class="['company_one',actIndex==index?'active':'']" @click="changeSel(index)" v-for="(item,index) in companyList" 
                   :key="item.id">{{item.name}}</li>
                
               </ul>
               <div class="map_slider">
                  <h1>半径</h1>
                  <el-slider @change='changeSlider' :step="10" :min="10" :max="1000" v-model="sliderVal"></el-slider>
               </div>
               <div style="display: flex; justify-content: flex-end; padding-right: 80px;">
                 <el-button>取消</el-button>
                 <el-button type="primary" @click="toSaveAll">批量保存</el-button>
               </div>
            </div>

          </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {getAttendanceCompanyList,AttendanceCompanyUpdate} from '@/api/attendance'

export default {
  name: 'AttendMap',
 
  data() {
    return {
      actIndex:0,
      drawer:false,
      direction: 'ttb', 
      sliderVal:1,
      map:"", //地图的操作实例
      companyList:[] //公司列表数据
    };
  },
  created(){
    
  },
  mounted() {
     
  },
  watch:{
    drawer(newVal){//监听抽屉打开关闭
      if(newVal){
        this.getCompnayList();
      }
    }
  },
  methods: {
    async toSaveAll(){ //批量保存接口
        let res=await AttendanceCompanyUpdate({
          list:this.companyList
        })
        console.log(res,"批量保存接口")
        this.$message.success("批量保存成功")
        this.drawer=false;
    },
    changeSlider(){ //滑轨改变时间
      // this.sliderVal
      // 改变当前公司数据内的圆的半径的radius
      this.companyList[this.actIndex].radius=this.sliderVal;
 
           this.initAMap(this.companyList[this.actIndex].point,this.sliderVal);
    
     
    },
    changeSel(index){ //点击分公司切换
      this.actIndex=index;
      // 给滑轨的赋值
         this.sliderVal=this.companyList[index].radius;
      // 传送对应的经纬度和半径
      this.initAMap(this.companyList[index].point,this.companyList[index].radius);
    },
    async getCompnayList(){ //获取分公司考勤列表 
      let res=await getAttendanceCompanyList();
      console.log(res,"------------------")
      this.companyList=res.data;
      // 默认加载第一个公司的地图
      this.sliderVal=this.companyList[0].radius;
       this.initAMap(res.data[0].point,res.data[0].radius);
    },
    initAMap(point,radius){ //point坐标  radius 半径
        console.log("初次加载")
      // 生成地图的方法
      AMapLoader.load({
           key:"1c5f475b8a1c15525e1c1e94c33137ab", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [], //需要使
      }).then(AMap=>{
          // AMap地图的操作对象
          // mymap 容器的id
            this.map= new AMap.Map("mymap", {
              // 设置地图容器id
              viewMode: "3D", // 是否为3D地图模式
              zoom: 16, // 初始化地图级别
              center: point, // 初始化地图中心点位置
            })
            //1. 添加坐标点
             let markers= new AMap.Marker({
               position: point, // 坐标点
               //  icon:"",
              //  content:"打开范围",
               title:"打开范围",
               visible:true,
             })
            //  添加标点到地图
             this.map.add(markers)

          // 2. 绘制圆形的api
          console.log(radius,"------------")
         let circle= new AMap.Circle({
            center:point,//圆心位置
            radius:radius,//半径
            strokeColor:"#0000ff",//轮廓颜色
            strokeWeight:2,
            fillColor:"#0000ff",//填充颜色
            fillOpacity:0.5
         })
         this.map.add(circle)

            //  3.创建文本
            let text=new AMap.Text({
              position: point,
              text:radius+"米打卡",
              offset:[-35,40], //偏移量
              style:{
                backgroundColor:"white",
                color:"red"
              }
            })
            this.map.add(text);


      }).catch(err=>{
              console.log(err,"捕捉到错误")
      })


    }
  },
};
</script>

<style lang="scss">
    .drawer_wrap{
      // width: 100%;
      // height: 700px;
    }
    .map_wrap{
      width: 100%;
      display: flex;
      height: 100vh;
      .map_left{
        width: 65%;
        height: 100vh;
        h1{
          margin-left: 40px;
        }
        .map_left_map_info{
          width: 80%;
          height: 700px;
          margin: 20px auto;
          background: darkcyan;
        }
      }
      .map_right{
        width: 35%;
        height: 100vh;
        .company_list{
          height: 450px;
          width: 200px;
          overflow-y: scroll;
          // background:darkgreen;
          margin-top: 70px;
          .company_one{
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            list-style: none;
            cursor: pointer;
            &:nth-child(odd){
              background: white;
            }
             &:nth-child(even){
              background: #e5e5e5;
            }
            &.active{
              background: blue;
              color: white;
            }
          }
        }
        .map_slider{
          width: 400px;
          margin-top: 30px;
        }
      }
    }
   
</style>